import { HtmlNode, HtmlNodeModel } from "@logicflow/core";
import { App, createApp, h, ref } from "vue";
import VueNode from "./CommonHtml.vue"

class CommonHtmlNode extends HtmlNodeModel {
    setAttributes() {
        this.properties.name = this.properties.name || "common";
        this.text.editable = false; // 禁止节点文本编辑
        // 设置节点宽高和锚点
        const width = 90;
        const height = 60;
        this.width = width;
        this.height = height;
        this.anchorsOffset = [
            [width / 2, 0],
            [0, height / 2],
            [-width / 2, 0],
            [0, -height / 2],
        ]
    }
}

class CommonHtmlView extends HtmlNode {
    app: App<Element>;

    constructor(props: any) {
        super(props);
        const appRef = ref(null);
        this.app = createApp({
            render: () => h(VueNode, {
                ref: appRef, callback: (p) => {
                    props.model.setProperties(p);
                },
                properties: props.model.getProperties()
            })
        });
    }

    setHtml(rootEl: HTMLElement) {
        const node = document.createElement("div");
        rootEl.appendChild(node);
        this.app.mount(node);
    }
}

export default {
    type: "COMMON",
    view: CommonHtmlView,
    model: CommonHtmlNode
};